<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:replace="~{fragments/header :: headInfo}">

</head>
<body>
	<div th:replace="~{fragments/header :: header}"></div>

	<!-- Page Content -->
	<div class="container blog-content-container">

		<div class="row">

			<!-- Blog Entries Column -->
			<div class="col-md-8">
				<div id="mainContainer">
					<!-- Blog Post -->
					<div id="mainContainerRepleace">
						<div class="card mb-4" th:each="blog : ${blogList}">
							<div class="card-block">
								<h2 class="card-title">
									<span> <a href="/u/waylau" title="waylau"
										th:href="'/u/' + ${blog.user.username}" th:title="${blog.user.username}">
											<img src="/favicon.ico"
											th:src="${blog.getUser().getAvater()} == null ? '/favicon.ico' : ${blog.getUser().getAvater()}"
											class="blog-avatar-50">
									</a>
									</span> <a href="/u/waylau/blogs/1" class="card-link" title="waylau"
										th:href="'/u/' + ${blog.user.username} + '/blogs/'+ ${blog.id}"
										th:title="${blog.title}" th:text="${blog.title}"> OAuth
										2.0 认证的原理与实践 </a>
								</h2>
								<p class="card-text" th:text="${blog.summary}">使用 OAuth 2.0
									认证的的好处是显然易见的。你只需要用同一个账号密码，就能在各个网站进行访问，而免去了在每个网站都进行注册的繁琐过程。
									本文将介绍 OAuth 2.0 的原理，并基于 Spring Security 和 GitHub 账号，来演示 OAuth
									2.0 的认证的过程。</p>
								<div class="card-text">
									<a href="/u/waylau" th:href="'/u/' + ${blog.user.username}"
										class="card-link" th:text=${blog.user.username}>waylau</a> 发表于
									[[${#dates.format(blog.createTime, 'yyyy-MM-dd HH:mm')}]] <i
										class="fa fa-eye" aria-hidden="true">[[${blog.readSize}]]</i>
									<i class="fa fa-heart-o" aria-hidden="true">[[${blog.likeSize}]]</i>
									<i class="fa fa-comment-o" aria-hidden="true">[[${blog.commentSize}]]</i>
								</div>
							</div>
						</div>

						<div th:replace="~{fragments/page :: page}">...</div>
					</div>
				</div>
			</div>

		<!-- 右侧栏目 -->
		<div class="col-md-4">
			<div>
				<!-- 热门标签 -->
				<div class="card ">
					<h5 class="card-header">
						<i class="fa fa-tags" aria-hidden="true"></i> 热门标签
					</h5>
					<div class="card-block">
						<div class="row">
							<div class="col-lg-12">
								<a th:each="tag, tagStat : ${tags}" th:object="${tag}"
									href="/blogs?keyword=1" th:href="'/blogs?keyword=' +  *{name}">
									<span class="badge"
									th:classappend="${tagStat.index} eq 0 ? 'badge-danger': (${tagStat.index} eq 1 ? 'badge-warning':(${tagStat.index} eq 2 ? 'badge-info':'badge-default'))"
									th:text="*{name}">Web Design</span>
								</a>
							</div>
						</div>
					</div>
				</div>
				<!-- 热门用户 -->
				<div class="card my-4">
					<h5 class="card-header">
						<i class="fa fa-users" aria-hidden="true"></i> 热门用户
					</h5>
					<div class="card-block">
						<div class="row">
							<div class="col-lg-12">
								<span th:each="user: ${users}" th:object="${user}"> <a
									href="/u/waylau" th:href="'/u/' + *{username}" title="waylau"
									th:title="*{username}"> <img
										src="/images/avatar-defualt.jpg"
										th:src="*{avatar} == null ? '/favicon.ico' : *{avatar}"
										width="50px" height="50px">
								</a>
								</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 热门文章 -->
				<div class="card my-4">
					<h5 class="card-header">
						<i class="fa fa-fire" aria-hidden="true"></i> 热门文章
					</h5>

					<ul class="list-group" th:each="hotblog , hotblogStat : ${hotest}"
						th:object="${hotblog}">
						<a th:href="'/u/'+*{user.username} +'/blogs/'+ *{id}"
							class="list-group-item"> [[*{title}]]<span
							class="badge badge-pill"
							th:classappend="${hotblogStat.index} eq 0 ? 'badge-danger': (${hotblogStat.index} eq 1 ? 'badge-warning':(${hotblogStat.index} eq 2 ? 'badge-info':'badge-default'))">[[*{readSize}]]</span>
						</a>
					</ul>

				</div>

				<!-- 最新发布 -->
				<div class="card my-4">
					<h5 class="card-header">
						<i class="fa fa-line-chart" aria-hidden="true"></i> 最新发布
					</h5>
					<div class="list-group">
						<ul class="list-group" th:each="newblog : ${newest}"
							th:object="${newblog}">
							<a th:href="'/u/'+*{user.username} +'/blogs/'+ *{id}"
								class="list-group-item" th:text="*{title}"> </a>

						</ul>
					</div>

				</div>
			</div>
		</div>

	</div>
	<!-- /.row -->
	<div th:text="${userModel}"></div>
	</div>
	<div th:replace="~{fragments/footer :: footer}">...</div>
	<!-- JavaScript -->
	<script src="/js/index.js" th:src="@{/js/index.js}"></script>
</body>
</html>
